import React, { useState, useRef } from 'react';
import { Button } from './ui/button';
import { Card } from './ui/card';
import { Input } from './ui/input';
import { Progress } from './ui/progress';
import { Upload, ImagePlus, Video } from 'lucide-react';

interface MediaUploadProps {
  onUpload: (file: File) => void;
}

const MediaUpload: React.FC<MediaUploadProps> = ({ onUpload }) => {
  const [isDragging, setIsDragging] = useState<boolean>(false);
  const [uploadProgress, setUploadProgress] = useState<number>(0);
  const [isUploading, setIsUploading] = useState<boolean>(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragging(true);
  };

  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragging(false);
  };

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragging(false);
    
    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      const file = e.dataTransfer.files[0];
      handleFileUpload(file);
    }
  };

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const file = e.target.files[0];
      handleFileUpload(file);
    }
  };

  const handleFileUpload = (file: File) => {
    // 检查文件类型
    if (!file.type.startsWith('image/') && !file.type.startsWith('video/')) {
      alert('请上传图片或视频文件');
      return;
    }

    // 模拟上传进度
    setIsUploading(true);
    let progress = 0;
    const interval = setInterval(() => {
      progress += 10;
      setUploadProgress(progress);
      
      if (progress >= 100) {
        clearInterval(interval);
        setIsUploading(false);
        onUpload(file);
      }
    }, 200);
  };

  const handleButtonClick = () => {
    if (fileInputRef.current) {
      fileInputRef.current.click();
    }
  };

  return (
    <div className="w-full">
      <div
        className={`border-2 border-dashed rounded-lg p-8 text-center ${
          isDragging ? 'border-primary bg-primary/10' : 'border-gray-300'
        } transition-colors duration-200 cursor-pointer`}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={handleButtonClick}
      >
        <input
          type="file"
          ref={fileInputRef}
          onChange={handleFileChange}
          accept="image/*,video/*"
          className="hidden"
        />
        
        <div className="flex flex-col items-center justify-center space-y-4">
          <div className="bg-primary/10 p-4 rounded-full">
            <Upload className="h-12 w-12 text-primary" />
          </div>
          <div>
            <h3 className="text-lg font-medium">拖放文件或点击上传</h3>
            <p className="text-sm text-gray-500 mt-1">支持图片和视频文件</p>
          </div>
          
          <div className="flex gap-4">
            <Card className="p-4 flex flex-col items-center">
              <ImagePlus className="h-8 w-8 text-primary mb-2" />
              <span className="text-sm">图片</span>
            </Card>
            <Card className="p-4 flex flex-col items-center">
              <Video className="h-8 w-8 text-primary mb-2" />
              <span className="text-sm">视频</span>
            </Card>
          </div>
          
          <Button className="bg-accent hover:bg-accent/90 text-white">
            选择文件
          </Button>
        </div>
      </div>

      {isUploading && (
        <div className="mt-4">
          <p className="text-sm mb-2">上传中... {uploadProgress}%</p>
          <Progress value={uploadProgress} className="h-2" />
        </div>
      )}
    </div>
  );
};

export default MediaUpload;